<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"

      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"

      >
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
        <ui:composition template="../Master/adminMaster.xhtml">
            <ui:define name="page-content">
                <section class="grid_12" id="dashtabs">

                    <div id="dashtabs-pages" class="box-content no-padding">
                        <h:form>
                            <div style="padding: 6px;margin-bottom: 13px">
                                <span style="font-size: 14px;color: #333333">Generate the reports by</span>  
                                <select id="dates" style="width: 150px" class="select">
                                    <option id="dailySe">Daily</option>
                                    <option id="rangeSe">In Range</option>
                                </select>
                            </div>
                            <div style="padding: 6px;margin-bottom: 13px" id="daily">
                                <span style="margin-right: 15px;font-weight: bold;font-size: 13px">Daily</span>&nbsp;<p:calendar value="#{detailedReportBean.daily}" showButtonPanel="true" navigator="true" />&nbsp;&nbsp;&nbsp;&nbsp;<p:commandButton actionListener="#{detailedReportBean.detailReportByDaily()}" value="Generate Report" styleClass="button grey" update="summaryReports"></p:commandButton>
                            </div>
                            <div style="padding: 6px;margin-bottom: 13px" id="range">
                                <span style="margin-right: 15px;font-weight: bold;font-size: 13px">From</span><p:calendar value="#{detailedReportBean.fromWeekly}" showButtonPanel="true" navigator="true" />&nbsp;&nbsp;&nbsp;&nbsp; <span style="margin-right: 15px;font-weight: bold;font-size: 13px">To</span><p:calendar value="#{detailedReportBean.toWeekly}"  showButtonPanel="true" navigator="true"/>&nbsp;&nbsp;&nbsp;&nbsp;<p:commandButton actionListener="#{detailedReportBean.detailReportByWeekly()}" value="Generate Report" styleClass="grey button" update="summaryReports"></p:commandButton>
                            </div>
                            <div class="box-header">
                                Detailed Report by #{detailedReportBean.flag}
                                <ul class="controls"></ul>
                            </div>
                            <p:dataTable var="temp" value="#{detailedReportBean.detailedReport}"  paginator="true" rows="10"  id="summaryReports"
                                         emptyMessage="No complaints found with given criteria" 
                                         filteredValue="#{detailedReportBean.filteredReport}" 
                                         styleClass="table no-border"  paginatorPosition="bottom">  
                               
                                <p:column headerText="No" sortBy="#{temp.complaintNo}" filterBy=" #{temp.complaintNo}"  filterMatchMode="contains">  
                                    #{temp.complaintNo}  
                                </p:column>  
                                <p:column headerText="Title" sortBy="#{temp.complaintTitle}" filterBy=" #{temp.complaintTitle}"  filterMatchMode="contains">  
                                    #{temp.complaintTitle}  
                                </p:column>  
                                <p:column headerText="Complaints Category" sortBy="#{temp.compalintCategory.categoryName}" filterBy="#{temp.compalintCategory.categoryName}"  filterMatchMode="contains">  
                                    #{temp.compalintCategory.categoryName}
                                </p:column> 
                                <p:column headerText="Department" sortBy="#{temp.complaintMembers.departmentID.departmentName}" filterBy="#{temp.complaintMembers.departmentID.departmentName}"  filterMatchMode="contains">  
                                    #{temp.complaintMembers.departmentID.departmentName}
                                </p:column> 
                                <p:column headerText="Creator" sortBy="#{temp.complaintMembers.membersName}" filterBy="#{temp.complaintMembers.membersName}"  filterMatchMode="contains">  
                                    #{temp.complaintMembers.membersName}
                                </p:column> 
                                <p:column headerText="Solver" sortBy="#{temp.complaintTechnical.membersName}" filterBy="#{temp.complaintTechnical.membersName}"  filterMatchMode="contains">  
                                    #{temp.complaintTechnical.membersName}
                                </p:column> 
                                <p:column headerText="Create Date" sortBy="#{temp.complaintCreate}" filterBy="#{temp.complaintCreate}"  filterMatchMode="contains">  
                                    <h:outputText value="#{temp.complaintCreate}" >
                                        <f:convertDateTime pattern="dd/MM/yyyy HH:mm" />
                                    </h:outputText>

                                </p:column> 
                                <p:column headerText="Close Date" sortBy="#{temp.complaintClose}" filterBy="#{temp.complaintClose}"  filterMatchMode="contains">  
                                    <h:outputText value="#{temp.complaintClose}" >
                                        <f:convertDateTime pattern="dd/MM/yyyy HH:mm" />
                                    </h:outputText>
                                </p:column> 
                            </p:dataTable> 
                        </h:form>
                    </div>
                </section>
                <br class="cl" />
            </ui:define>
        </ui:composition>
    </h:body>
</html>

